<template>
  <!-- 地址列表组件 -->
  <div class="addressBox" v-if="addressList.length != 0">
    <div v-for="(item, index) in addressList" :key="item.id" class="item" @click="setChecked(index)">
      <van-checkbox v-if="showCheckbox" v-model="item.checked" class="checkbox" checked-color="#ff594d"></van-checkbox>
      <div class="content">
        <div class="contact">
          <div class="name">{{item.name}}</div>
          <div class="phone">{{item.tel}}</div>
          <div v-if="item.isDefault" class="default">默认</div>
        </div>
        <div class="location">{{item.province}}{{item.city}}{{item.county}}{{item.addressDetail}}</div>
      </div>
      <div v-if="showEdit" class="editBox" @click="setAddress(item.aid)">
        <van-icon name="edit" />
      </div>
    </div>
  </div>
  <van-empty description="没有地址数据了" class="empty" v-else />
</template>

<script>
export default {
  name: "AdsList",

  props: {
    // 显示复选框
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    // 显示编辑
    showEdit: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      checked: 0,
      addressList: []
    };
  },

  created() {
    // 获取地址列表
    this.getAddressList();
  },

  methods: {
    // 获取地址列表
    getAddressList() {
      let tokenString = this.$cookies.get("TOKEN");
      this.axios.get('findAddress', {
        params: {
          tokenString
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 700) {
            this.$toast("请先登录");
            // 清除token
            this.$cookies.remove("TOKEN");
            // 延迟2秒后跳转到登录页面
            let timer = setTimeout(() => {
              clearTimeout(timer);
              this.$router.replace({ name: "Login" });
            }, 2000);
            return;
          }
          if(res.data.code === 20000) {
            // 定义选中标记
            let none = true;
            // 循环添加自定义选中状态属性
            for(let index in res.data.result) {
              res.data.result[index].checked = false;
              // 给默认地址设置为选中状态
              if(res.data.result[index].isDefault) {
                res.data.result[index].checked = true;
                // 将默认地址截取出来
                let isDefault = res.data.result.splice(index, 1);
                // 再添加到数组头部
                res.data.result.unshift(isDefault[0]);
                none = false;
              }
            }
            // 如果没有默认地址，则设置地址列表里第一个为选中状态
            if(none) {
              res.data.result[0].checked = true;
            }
            this.addressList = res.data.result;
          }
      }).catch(err => {
        
      })
    },

    // 设置选中状态
    setChecked(index) {
      // 如果没有开启复选框则不进行操作
      if(!this.showCheckbox) return;
      // 清除所有选中状态
      this.addressList.forEach(v => {
        v.checked = false;
      })
      // 设置所点击地址位选中状态
      this.addressList[index].checked = true;
      // 并且将状态传递回父元素更新订单的地址信息
      this.$emit('changeAddress', this.addressList[index].aid);
    },

    // 编辑地址
    setAddress(aid) {
      this.$router.push({name: 'NewAddress', params: {aid}});
    }
  }
};
</script>

<style lang="less" scoped>
.empty {
  margin-top: 30px;
  background: #f7f8fa;
}

.addressBox {
  padding-bottom: 15px;
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .item {
    display: flex;
    align-items: center;
    // margin: 15px 0;
    padding: 25px 10px 15px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 1px #d4d4d4;
    &:last-child {
      box-shadow: none;
    }
    .content {
      margin-left: 12px;
      .contact {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        vertical-align: middle;
        .name {
          margin-top: -2px;
        }
        .phone {
          margin: 0 10px;
        }
        .default {
          padding: 0 5px;
          background: #ff594d;
          color: #fff;
          border-radius: 20px;
        }
      }
    }
    .editBox {
      margin-left: auto;
      color: #999;
      font-size: 24px;
    }
  }
}
</style>